<template>
	<view class="information-content">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="isFixed" :is-back="isBack">
			<view class="slot-wrap">
				<u-search v-model="searchVal.keyword" :show-action="showAction" height="56" :action-style="{color: '#fff'}"
					 @search="getListFn()">
				</u-search>
			</view>
		</u-navbar>
    <u-sticky>
      <u-tabs bg-color="#fff" active-color="#F4333C" :list="tabList" @change="change" :current="current"
        :is-scroll="false" :offset="offset"></u-tabs>
    </u-sticky>
		<!-- 新闻-资讯模块 -->
    <view class="my-loading" v-if="loading">
      <u-loading mode="circle" size="36"></u-loading>
    </view>
    <view class="list-con" v-else>
        <view v-if="list.length > 0" class="list-bg">
          <view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
            <view class="title ellipsis">{{ item.title }}</view>
            
            <view v-if="thisType !== '1003004'">
              <view class="common-news-img" v-if="item.coverPath && item.coverPath.length>0">
              	<image :src="img" mode="" class="news-img"
              		v-for="(img,imgIndex) in item.coverPath.split(',').slice(0,3)" :key="imgIndex"></image>
              </view>
            </view>
            <view v-else style="margin-bottom: 10rpx;">
              <view v-if="!item.details">
                <view class="common-news-img" v-if="item.coverPath && item.coverPath.length>0">
                	<image :src="img" mode="" class="news-img"
                		v-for="(img,imgIndex) in item.coverPath.split(',').slice(0,3)" :key="imgIndex"></image>
                </view>
              </view>
              <view v-else>
                  <!-- #ifdef H5 -->
                  <video class="video-h" style="object-fit:cover; width: 100%; height: 360rpx;" :poster="item.coverPath ? item.coverPath : ''" controls width="100%" :src="item.details"></video>
                  <!-- #endif -->
                  <!-- #ifdef APP-PLUS -->
                  <video class="video-h" style="object-fit:cover; width: 100%; height: 360rpx;" :poster="item.coverPath ? item.coverPath : ''" controls width="100%" :src="item.details"></video>
                  <!-- #endif -->
                  <!-- #ifdef MP-WEIXIN -->
                  <video class="video-h" objectFit="cover" style="width: 100%; height: 360rpx;" :poster="item.coverPath ? item.coverPath : ''" controls width="100%" :src="item.details"></video>
                  <!--  #endif -->
              </view>
            </view>
            
            <view class="common-news-desc">
            	<view>{{item.createByName}} {{item.createTime}}</view>
            	<text>{{item.numberOfComments}}评</text>
            </view>
          </view>
          <u-loadmore :status="status" />
        </view>
        <view v-else><u-empty text="暂无数据" mode="list"></u-empty></view>
    </view>
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				//navbar
				isFixed: true,
				isBack: true,
				// background: '#fff',
				// 搜索
				showAction: false,
				searchVal: {
					keyword: "",
					page: 1,
					rows: 10,
					sortField: "",
					sortType: "",
					type: '', // 其他
				},
				// tabs数据
				tabList: [
					{
     					name: '推荐', 
						type: ''
					}, 
					{
	    				name: '政策法规',
						type: '1003001'
		    		},
					{
					    name: '求职创业',
						type: '1003002'
				    }, 
					{
				    	name: '运动处方',
						type: '1003003'
				    }, 
					{
					    name: '健康科普',
						type: '1003004'
				    },
				],
				current: 0,
				offset: [5, 30],
				list: [],
        thisType: "",
        loading: true,
        status: 'loadmore',
			};
		},
		onLoad() {
      this.getListFn();
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.status = 'loadmore';
      this.list = [];
      this.searchVal.page = 1;
      this.getListFn();
      uni.stopPullDownRefresh();
    },
    // 上拉加载
    onReachBottom() {
      if (this.status !== 'nomore') {
        this.status = 'loading';
        this.searchVal.page++;
        this.getListFn();
      }
    },
		methods: {
			// 获取列表
			async getListFn() {
				let res = await API.getInfoList(this.searchVal);
        if (res.code === 200) {
          this.list = [...this.list, ...res.result.rows];

          if(this.list.length >= (res.result.total * 1)) {
            this.status = 'nomore'
          } else {
            this.status = 'loading';
          }
        }
        this.loading = false;
			},
      // 切换
			change(val) {
        this.loading = true;
        this.list = [];
				this.current = val;
        this.searchVal.page = 1;
        this.searchVal.keyword = "";
				this.searchVal.type = this.tabList[val].type;
        this.thisType = this.tabList[val].type;
				this.getListFn();
			},
      toDetail(id) {
        console.log(id)
        let url = "/pages/information/informationDetail?id=" + id
        if(this.thisType === '1003004') {
          url = "/pages/information/healthyDetail?id=" + id
        }
      	uni.navigateTo({
      		url: url
      	})
      },
      // 搜索
      searchHandle() {},
      //返回按钮
      backHandle() {
      	uni.navigateBack();
      },
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 30rpx;

  /deep/.u-search {
    margin-right: 30rpx;
  }
}
.my-loading {
  text-align: center;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.list-con {
  padding: 28rpx;
  
  .list-bg {
    border-radius: 12rpx;
    background-color: #fff;
  }
  .title {
  	margin-bottom: 20rpx;
  	font-size: 28rpx;
  	font-family: PingFang SC;
  	font-weight: bold;
  	color: #333333;
  	line-height: 40rpx;
  }
  .common-news-img {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 100%;
  	height: 260rpx;
  	margin-bottom: 20rpx;
  
  	.news-img {
  		margin-right: 20rpx;
  		width: 100%;
  		height: 260rpx;
  
  		&:last-child {
  			margin-right: 0;
  		}
  
  	}
  }
  .common-news-desc {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	font-size: 20rpx;
  	font-weight: 500;
  	color: #999999;
  }
  .item {
    padding: 40rpx 0;
    margin: 0 24rpx;
    border-bottom: 1px solid #E3E3E3;
    
    .video-h {
      height: 300rpx;
      object-fit:fill; 
    }
    // video {
    //     width: 100%; 
    //     height: 100%; 
    //     object-fit: fill;
    // }
  }
  .item:last-child {
    border-color: red;
  }
  .item::last-child {
    border-bottom: 0px none !important;
  }
}
</style>
